<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mvc测试</title>
    <script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <style>
        ol {
            padding-inline-start: 10px;
        }

        li {
            margin: 10px;
            line-height: 30px;
            border-bottom: 1px #555 dotted
        }

        li * {
            vertical-align: middle;
        }

        .left {
            float: left;
            text-decoration: none;
            max-width: 40%;
        }

        .right {
            float: right;
            width: 60%;
        }
    </style>
</head>
<body>
<div id="app">
    <tests title="SpringMVC请求地址与参数映射练习" :items="tests1" ref="a"></tests>
</div>
<script>
    Vue.component('tests', {
        props: ['title', 'items'],
        template: `
            <FIELDSET>
                <legend>{{title}}（ {{oks}} / {{items.length}} ）</legend>
                <ol>
                    <li v-for="(t,i) in items">
                        <span v-if="t.in" class="left">
                            <input @keydown.enter="aclick(t,i)" v-model="t.href" placeholder="请输入请求地址，点击“发送”测试" size="40" style="height:18px">
                            <button @click.prevent="aclick(t,i)">发送</button>
                        </span>
                        <span v-else class="left">
                            <a @click.prevent="aclick(t,i)" :href="t.href" :style="{color: equals(t.expect,t.act)?'#aaa':t.act?'DarkOrange':'green'}">{{t.href}}</a>
                        </span>
                        <span :style="{color: equals(t.expect,t.act)?'green':t.act?'DarkOrange':'#aaa'}" class="right">{{t.act||t.expect}}</span>
                    </li>
                </ol>
            </FIELDSET>
        `,
        created(){
            this.items.forEach(i=>{
                i.in = !i.href;
            })
        },
        computed:{
          oks(){
              var cnt = 0;
              for (const item of this.items) {
                  if(equals(item.expect, item.act)){
                      cnt ++;
                  }
              }
              return cnt;
          }
        },
        methods: {
            aclick(t, i) {
                axios.get(t.href).then(res => {
                    t.act = res.data;
                }).catch(e=>{
                    t.act = e.message;
                    console.info(e);
                });
            }
        }
    })
    var v = new Vue({
        el: "#app",
        data: {
            tests1: [
                {href: "hello.do", expect: "hello world!", act: 0},
                {href: "a/hello.do", expect: "hello world!", act: 0},
                {href: "a/b/c/hello.do", expect: "hello world!", act: 0},
                {href: "page/hello", expect: "你好中国!", act: 0},
                {href: "hello?name=张三", expect: "你好张三", act: 0},
                {href: "hello", expect: "你好李四", act: 0},
                {href: "add?a=3&b=2", expect: "5", act: 0},
                {href: "sub?a=3&b=2", expect: "1", act: 0},
                {href: "mul?a=3&b=2", expect: "6", act: 0},
                {href: "div?a=3&b=2", expect: "1.5", act: 0},
                {href: "user1?name=张三&age=18&boy=true",expect: {name: "张三", age:18, boy:true},act: 0},
                {href: "user2?name=张三&friend.name=李四",expect: {name: "张三", friend: {name: "李四", friend: null}},act: 0},
                {href: "user3?name=张三&name=李四&name=王五",expect: ["张三","李四","王五"],act: 0},
                {href: "reqHeader1",expect: "Accept => application/json, text/plain, */*",act: 0},
                {href: "reqHeader2",expect: "Host == localhost",act: 0},
                {href: "cookie1",expect: "Cookie 项 name 等于 john",act: 0},
                {href: "cookie2",expect: "Cookie 项 age 等于 18",act: 0},
                {href: "pv1/你好/张三",expect: "张三你好",act: 0},
                {href: "pv2/2021-8-18",expect: "2021年8月18日星期三",act: 0},
                {href: "request",expect: "请求对象: RequestFacade",act: 0},
                {href: "response",expect: "响应对象: ResponseFacade",act: 0},
                {href: "session",expect: "会话对象: StandardSessionFacade",act: 0},
                {href: "", expect: "你好武松!", act: 0},
                {href: "", expect: "hello world!", act: 0},
                {href: "",expect: ["张飞","刘备","关羽"],act: 0},
                {href: "",expect: {name: "扈三娘", age:22, boy:false},act: 0},
                {href: "",expect: "Cookie 项目 age 等于 25",act: 0},
                {href: "",expect: "Host == 127.0.0.1",act: 0},
                {href: "",expect: "武松打虎",act: 0},
                {href: "",expect: "响应对象: ResponseFacade",act: 0},
                {href: "",expect: {name: "宋江", friend: {name: "李逵", friend: null}},act: 0},
                {href: "",expect: "2021年5月1日星期六",act: 0},
                {href: "asUser1?user1=张三-18-true",expect: {name: "张三", age:18, boy:true},act: 0},
            ]
        }
    })

    function equals(o1, o2) {
        if (typeof o1 == typeof o2) {
            if (Array.isArray(o1)) {
                for (let i = 0; i < o1.length; i++) {
                    if (equals(o1[i], o2[i]) == false) {
                        return false;
                    }
                }
                return true;
            } else if( typeof o1 == 'object') {
                for (const o1Key in o1) {
                    if (equals(o1[o1Key], o2[o1Key]) == false) {
                        return false;
                    }
                }
                return true;
            }
        }
        return o1 == o2;
    }
</script>
</body>
</html>